import React from 'react'
import * as echarts from 'echarts';

import Title from './User_analytics/Component/Title'
import Flushed from './Operate_monitor/Component/Flushed';
import User_Profile from './User_analytics/Component/User_Profile';
import Trend from './User_analytics/Component/Trend';
import Tabular from './User_analytics/Component/Tabular'


export default function Trade_analytics() {

  const data = [
    {
      _id: new Date('2022-01-01'),
      name: '订单金额(元)',
      num: 1290,
      trend: '↑ 0.5%'
    },
    {
      _id: new Date('2022-01-02'),
      name: '订单用户',
      num: 2,
      trend: '↑ 0%'
    },
    {
      _id: new Date('2022-01-03'),
      name: '支付订单数',
      num: 12,
      trend: '↑ 20%'
    },
    {
      _id: new Date('2022-01-04'),
      name: '订单完成率',
      num: 2,
      trend: '↑ 100%'
    },
    {
      _id: new Date('2022-01-05'),
      name: '用户APPU',
      num: '01:03:12 ',
      trend: '↑ 12.56%'
    },
  ]




  const trend = []
  const main = 'main'
  const box = () => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['订单金额', '佣金金额']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06', '2022-01-07']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单金额',
          type: 'line',
          stack: 'Total',
          data: [89, 332, 201, 414, 123, 120, 520]
        },
        {
          name: '佣金金额',
          type: 'line',
          stack: 'Total',
          data: [58,223, 116, 352, 71, 70,300]
        }
      ]
    };

    option && myChart.setOption(option);
  }



  return (
    <div>
      <Title title='交易分析' />
      <Flushed />
      <User_Profile name='交易概况' data={data} />
      <Trend name='交易趋势'  trend={trend} main={main} box={box}></Trend>
      <Tabular name='用户趋势'></Tabular>
    </div>
  )
}
